<template>
    <div style="transform: scale(1.7)" class="container">
      <!-- Header with Toggle Tabs -->
      <div class="toggle-tabs">
        <button @click="isLogin = true" :class="{ active: isLogin }">登录</button>
        <button @click="isLogin = false" :class="{ active: !isLogin }">注册</button>
      </div>

      <!-- Form Container with Fixed Height -->
      <div class="form-container">
        <!-- Login Form with CAPTCHA Below Password -->
        <div v-if="isLogin" class="form">
          <div class="input-group">
            <svg class="icon" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"></path>
            </svg>
            <input v-model="username" type="text" placeholder="用户名称" class="input-field">
          </div>
          <div class="input-group">
            <svg class="icon" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 11c1.104 0 2-.896 2-2s-.896-2-2-2-2 .896-2 2 .896 2 2 2zm0 2c-2.208 0-4 1.792-4 4v1h8v-1c0-2.208-1.792-4-4-4z"></path>
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 11h2m-2 4h4"></path>
            </svg>
            <input v-model="password" type="password" placeholder="密码" class="input-field">
          </div>
          <!-- CAPTCHA Below Password -->
<!--          <div class="captcha-container">-->
<!--            <img src="https://images.unsplash.com/photo-1507525428034-b723cf961d3e?w=320" alt="Waterfall" class="captcha-image">-->
<!--            <div class="captcha-overlay">-->
<!--              <div class="captcha-piece"></div>-->
<!--            </div>-->
<!--            <div class="slider-bar">-->
<!--              <div class="slider"-->
<!--                   @mousedown="startDrag" @touchstart="startDrag"-->
<!--                   :style="{ left: sliderPosition + 'px' }">-->
<!--                <svg class="slider-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">-->
<!--                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path>-->
<!--                </svg>-->
<!--              </div>-->
<!--              <span class="slider-text">drag the slider to fill the puzzle</span>-->
<!--            </div>-->
<!--          </div>-->
          <div class="forgot-password">
            <a href="#" class="forgot-link">忘记密码？</a>
          </div>
          <button class="submit-button" @click="handleLogin" :disabled="loading">
            {{ loading ? '登录中...' : '登录' }}
          </button>
        </div>

        <!--注册 -->
        <div v-else class="form">
          <div class="input-group">
            <svg class="icon" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"></path>
            </svg>
            <input v-model="username" type="text" placeholder="用户名称" class="input-field">
          </div>
          <div class="input-group">
            <svg class="icon" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 11c1.104 0 2-.896 2-2s-.896-2-2-2-2 .896-2 2 .896 2 2 2zm0 2c-2.208 0-4 1.792-4 4v1h8v-1c0-2.208-1.792-4-4-4z"></path>
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 11h2m-2 4h4"></path>
            </svg>
            <input v-model="password" type="password" placeholder="密码" class="input-field">
          </div>
          <div class="input-group">
            <svg class="icon" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 11c1.104 0 2-.896 2-2s-.896-2-2-2-2 .896-2 2 .896 2 2 2zm0 2c-2.208 0-4 1.792-4 4v1h8v-1c0-2.208-1.792-4-4-4z"></path>
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 11h2m-2 4h4"></path>
            </svg>
            <input v-model="confirmPassword" type="password" placeholder="再次输入密码" class="input-field">
          </div>
          <div class="input-group">
            <svg class="icon" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z"></path>
            </svg>
            <input v-model="phone" type="text" placeholder="手机号码" class="input-field">
          </div>
          <div class="input-group">
            <svg class="icon" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 11c1.104 0 2-.896 2-2s-.896-2-2-2-2 .896-2 2 .896 2 2 2zm0 2c-2.208 0-4 1.792-4 4v1h8v-1c0-2.208-1.792-4-4-4z"></path>
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 11h2m-2 4h4"></path>
            </svg>
            <div class="code-group">
              <input v-model="phoneCode" type="text" placeholder="手机验证码" class="input-field code-input">
              <button
                  class="code-button"
                  @click="handleGetCode"
                  :disabled="codeButtonDisabled"
              >
                {{ codeButtonText }}
              </button>
            </div>
          </div>
          <button class="submit-button" @click="handleRegister" :disabled="loading">
            {{ loading ? '注册中...' : '注册' }}
          </button>
        </div>
      </div>
    </div>
  </template>

<script>
import { useUserStore } from '@/stores/user'
import { ElMessage } from 'element-plus'

export default {
  data() {
    return {
      isLogin: true,
      username: '',
      password: '',
      confirmPassword: '',
      phone: '',
      phoneCode: '',
      isDragging: false,
      sliderPosition: 16,
      codeTimer: 0,
      codeButtonText: '获取验证码',
      codeButtonDisabled: false,
      loading: false,
    }
  },
  methods: {
    // 登录
    async handleLogin() {
      this.$router.push('/')
      if (!this.username || !this.password) {
        ElMessage.error('请输入用户名和密码')
        return
      }
      this.loading = true
      try {
        const result = await this.userStore.loginUser({
          username: this.username,
          password: this.password,
        })
        if (result.success) {
          ElMessage.success(result.message)
          // 登录成功后跳转到首页
          this.$router.push('/')
        } else {
          ElMessage.error(result.message)
        }
      } catch (error) {
        ElMessage.error('登录失败，请稍后重试')
      } finally {
        this.loading = false
      }
    },

    // 注册
    async handleRegister() {
      if (!this.username || !this.password || !this.confirmPassword || !this.phone || !this.phoneCode) {
        ElMessage.error('请填写完整注册信息')
        return
      }

      if (this.password !== this.confirmPassword) {
        ElMessage.error('两次输入的密码不一致')
        return
      }

      this.loading = true
      try {
        const result = await this.userStore.registerUser({
          username: this.username,
          password: this.password,
          confirmPassword: this.confirmPassword,
          phoneNumber: this.phone,
          verificationCode: this.phoneCode,
        })

        if (result.success) {
          ElMessage.success(result.message)
          // 注册成功后切换到登录页面
          this.isLogin = true
          // 清空表单
          this.resetForm()
        } else {
          ElMessage.error(result.message)
        }
      } catch (error) {
        ElMessage.error('注册失败，请稍后重试')
      } finally {
        this.loading = false
      }
    },

    // 获取验证码
    async handleGetCode() {
      if (!/^1[3-9]\d{9}$/.test(this.phone)) {
        ElMessage.error('请输入正确的手机号')
        return
      }

      this.codeButtonDisabled = true
      this.codeButtonText = '发送中...'

      try {
        const result = await this.userStore.getCode(this.phone)

        if (result.success) {
          ElMessage.success(result.message)
          // 设置倒计时60秒
          let seconds = 60
          this.codeButtonText = `${seconds}s`

          // 清除之前的定时器（如果有）
          if (this.codeTimer) {
            clearInterval(this.codeTimer)
          }

          this.codeTimer = setInterval(() => {
            seconds--
            this.codeButtonText = `${seconds}s`
            if (seconds <= 0) {
              clearInterval(this.codeTimer)
              this.codeButtonText = '获取验证码'
              this.codeButtonDisabled = false
            }
          }, 1000)
        } else {
          ElMessage.error(result.message)
          this.codeButtonText = '获取验证码'
          this.codeButtonDisabled = false
        }
      } catch (error) {
        ElMessage.error('验证码发送失败，请稍后重试')
        this.codeButtonText = '获取验证码'
        this.codeButtonDisabled = false
      }
    },

    // 重置表单
    resetForm() {
      this.username = ''
      this.password = ''
      this.confirmPassword = ''
      this.phone = ''
      this.phoneCode = ''
    }
  },

  computed: {
    userStore() {
      return useUserStore()
    }
  },

  beforeUnmount() {
    if (this.codeTimer) {
      clearInterval(this.codeTimer)
    }
  }
}
</script>

  <style scoped>
  .container {
    background-color: #1f2937;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
  }

  .toggle-tabs {
    display: flex;
    gap: 1rem;
    margin-bottom: 1.5rem;
  }

  .toggle-tabs button {
    font-size: 2.25rem;
    padding-bottom: 0.5rem;
    color: #9ca3af;
    background: none;
    border: none;
    cursor: pointer;
  }

  .toggle-tabs button.active {
    color: #ffffff;
    border-bottom: 2px solid #3b82f6;
  }

  .form-container {
    width: 20rem;
    height: 420px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }

  .form {
    display: flex;
    flex-direction: column;
    gap: 1rem;
  }

  .input-group {
    display: flex;
    align-items: center;
    border: 1px solid #6b7280;
    border-radius: 0.25rem;
  }
  .icon {
    width: 1.5rem;
    height: 1.5rem;
    color: #9ca3af;
    margin-left: 0.75rem;
  }
  .input-field {
    background: transparent;
    color: #ffffff;
    padding: 0.75rem;
    width: 100%;
    border: none;
    outline: none;
  }

  .code-group {
    display: flex;
    align-items: center;
    width: 100%;
  }

  .code-input {
    flex: 2;
    border: none;
  }

  .code-button {
    flex: 1;
    background-color: #3b82f6;
    color: #ffffff;
    padding: 0.75rem;
    border-top-right-radius: 0.25rem;
    border-bottom-right-radius: 0.25rem;
    border: none;
    cursor: pointer;
    transition: background-color 0.3s;
  }

  .code-button:hover {
    background-color: #2563eb;
  }

  .captcha-container {
    position: relative;
    width: 100%;
    height: 12rem;
    background-color: #374151;
    border-radius: 0.25rem;
  }

  .captcha-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 0.25rem;
    opacity: 0.8;
  }

  .captcha-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .captcha-piece {
    width: 4rem;
    height: 4rem;
    background-color: #ffffff;
    opacity: 0.5;
    border-radius: 0.25rem;
  }

  .slider-bar {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 2.5rem;
    background-color: #ffffff;
    display: flex;
    align-items: center;
    padding: 0 1rem;
  }

  .slider {
    position: absolute;
    width: 2rem;
    height: 2rem;
    background-color: #d1d5db;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
  }

  .slider-icon {
    width: 1.5rem;
    height: 1.5rem;
    color: #4b5563;
  }

  .slider-text {
    margin-left: 3rem;
    color: #4b5563;
  }

  .forgot-password {
    text-align: right;
  }

  .forgot-link {
    color: #60a5fa;
    font-size: 0.875rem;
    text-decoration: none;
  }

  .submit-button {
    width: 100%;
    background-color: #3b82f6;
    color: #ffffff;
    padding: 0.75rem;
    border-radius: 0.25rem;
    border: none;
    cursor: pointer;
    transition: background-color 0.3s;
  }

  .submit-button:hover {
    background-color: #2563eb;
  }

  .code-button:disabled {
    background-color: #9ca3af;
    cursor: not-allowed;
  }

  .code-button:disabled:hover {
    background-color: #9ca3af;
  }
  </style>
